<template>
  <div>
    <el-card class="box-card">
      <div slot="header" style="text-align:left">
        <span>秒杀列表</span>
        <el-button style="float: right; padding: 3px 0" @click="add" type="text">添加</el-button>
      </div>
      <el-table :data="seckills" border style="width: 100%">
      
      <el-table-column prop="name" label="名称" style="width: 20%"></el-table-column>
      <el-table-column prop="reduction" label="减免" style="width: 20%"></el-table-column>
      <el-table-column prop="startTime" label="开始时间" style="width: 50%">
      </el-table-column>
        <el-table-column prop="endTime" label="结束时间" style="width: 50%"></el-table-column>
        <el-table-column prop="updatetime" label="更新时间" style="width: 50%"></el-table-column>
    
        <el-table-column prop="description" label="描述" style="width: 50%"></el-table-column>
        <el-table-column prop="uped" label="上线" style="width: 20%">
              <template slot-scope="scope">
                  <el-switch @change="upedChange(scope.row)"
                    v-model="scope.row.uped"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
              </template>
          </el-table-column>
        <el-table-column label="操作" style="width:10%">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="setP(scope.row)">时间</el-button>
            <el-button @click="dele(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top:10px;">
        <el-pagination  background
          @current-change="handleCurrentChange"
          :current-page.sync="pagenow"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      :visible.sync="dialog"
      width="30%"
      center>
        <el-form :model='form' :rules="ruleform" label-width="80px" ref="form"> 
          <el-form-item label="名称" prop="name">
            <el-input  v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="减免" prop="reduction">
               <el-input-number v-model="form.reduction" :precision="2" :min="1" :step="1" ></el-input-number>
           </el-form-item>
          <el-form-item label="开始时间" prop="startTime">
             <el-date-picker  format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd HH:mm:ss" v-model="form.startTime" type="date"  placeholder="选择日期"></el-date-picker>
          </el-form-item>
           <el-form-item label="结束时间" prop="endTime">
            <el-date-picker  format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd HH:mm:ss" v-model="form.endTime" type="date"  placeholder="选择日期"></el-date-picker>
          </el-form-item>

           <el-form-item label="上线" prop="uped">
              <el-switch   v-model="form.uped" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
           </el-form-item>
            <el-form-item label="描述" prop="description">
            <el-input  type='textarea' v-model="form.description"></el-input>
          </el-form-item>
      
          <el-form-item>
            <el-button type="primary" @click="onSubmit">更新</el-button>
            <el-button @click="dialog=false">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { seckillList, seckillDele,seckillModify,seckillUped } from "@/libs/api.js";
export default {
  methods: {
    dele(row) {
      let ref = this;
      seckillDele(row.id).then(res => {
        this.$util.success();
        var temp = -1;
        for (var i = 0; i < this.seckills.length; i++) {
          if (this.seckills[i].id == row.id) {
            temp = i;
          }
        }
        if (temp != -1) {
          this.seckills.splice(temp, 1);
        }
        this.total--;
      });
    },
    add() {
       this.reset();
       this.dialog=true;
    },
    setP(row){
        this.$router.push({
                path: "/seckill/timeperiod/list",query: { id: row.id}
          });
    },
    edit(row) {
       this.form=row;
       this.dialog=true;
    },
    upedChange(row){
      // row.uped=!row.uped;
       var param ={"id":row.id,"uped":row.uped};
        seckillUped(param).then(res => {
           this.$util.success();
        });
    },
    handleCurrentChange(p){
       this.loadPage(p);
    },
    loadPage(){
        var param ={"pagesize":10,"pagenow":this.pagenow};
        seckillList(param).then(res => {
          this.seckills = res.rows;
          this.total = res.total;
        });
    },
    reset(){
       this.form={
        id:"",
        name:"",
        description:"",
        startTime:"",
        endTime:"",
        reduction:0,
        uped:false
      }
    },
      onSubmit(){
         this.$refs['form'].validate((valid) => {
              if (!valid) {
                return;
              }
                seckillModify(this.form).then((res) => {
                  this.$util.success();
                  //修改
                  if(this.form.id){
                    for(var i=0;i<this.seckills.length;i++){
                      if(this.seckills[i].id==this.form.id){
                        this.seckills[i]=res;
                      }
                    }
                  }else{//添加
                      this.seckills.push(res);
                  }
                  this.dialog=false;
                  this.reset();
              })
         });
    }
  },

  mounted() {
    this.loadPage();
    this.baseImage=this.$http.baseImage;
  },

  data() {
    return {
      seckills: [],
      total:0,
      pagenow:1,
      pagesize:10,
      baseImage:"",
      dialog:false,
      form:{
        id:"",
        name:"",
        description:"",
        startTime:"",
        endTime:"",
        reduction:0,
        uped:false
      },
        ruleform: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          reduction: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入描述', trigger: 'blur' }
          ],
          startTime: [
            {  required: true, message: '请选择开始日期', trigger: 'change' }
          ],
          endTime: [
            {  required: true, message: '请选择结束时间', trigger: 'change' }
          ]
        }
    };
  }
};
</script>